<template>
  <!-- 保安列表页 -->
  <view class="publicSecurity">
    <view class="wrapper-content">
      <scroll-view
        scroll-y="true"
        @scrolltolower="scrollBottom"
        :style="[
          {
            height: '100%',
          },
        ]"
        v-if="dataSource.length"
      >
        <view class="wrapper-item" v-for="(v, i) in dataSource" :key="i">
          <view
            class="items"
            :data-url="
              paiNew
                ? `/featureFun/staffDetails/staffDetails?id=${v.id}&position=${v.position_dictText}&companyMessageId=${options.companyId}`
                : ''
            "
            @click="handleClickRouter"
          >
            <view class="lt">
              <image
                :src="
                  v.personImage
                    ? imgPrefix + v.personImage
                    : baseImgUrl + 'queryFace-01.png'
                "
                mode="aspectFill"
              ></image>
            </view>
            <view class="rt">
              <view class="wrapper-facility">
                <view class="facility-item">
                  <view class="textAlign label">员工姓名：</view>
                  <view class="value valueName">
                    {{ v.personName || "" }}

                    <text class="job" v-if="v.position_dictText">
                      {{ v.position_dictText }}
                    </text>
                  </view>
                </view>
                <view class="facility-item">
                  <view class="textAlign label">入职时间：</view>
                  <view class="value valueName">
                    {{ formatters(v.entryTime, "YY-MM-DD") || "" }}
                  </view>
                </view>
                <view class="facility-item">
                  <view class="textAlign label">联系方式：</view>
                  <view class="value valueName">
                    {{ v.mobile || "" }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="pageBottom" v-if="pageBottom">—— 到底了 ——</view>
      </scroll-view>

      <view v-if="!dataSource.length">
        <u-empty
          mode="list"
          text="还没有添加工作人员信息！"
          :icon="baseImgUrl + 'no-icon3.png'"
        >
        </u-empty>
      </view>
    </view>

    <view class="btns" v-if="paiNew">
      <button
        class="submit-btn"
        type="primary"
        :data-url="`/featureFun/staffNewEditor/staffNewEditor?num=${1}&companyMessageId=${
          options.companyId
        }&rank=7`"
        @click="handleClickRouter"
        icon="map"
        style="width: 100%"
      >
        + 添加
      </button>
    </view>
  </view>
</template>

<script>
import { employeesList } from "@/api/home.js";
import {
  handleClickRouter,
  Toast,
  hiddenInfo,
  formatters,
} from "@/utils/util.js";

export default {
  name: "publicSecurity",
  data() {
    return {
      baseImgUrl: this.$baseImgUrl,
      paiNew: uni.getStorageSync("paiNew"),
      imgPrefix: uni.getStorageSync("imgPrefix"),
      dataSource: [],
      pageBottom: false,
      options: {},
      pageConfig: {
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
    };
  },
  onLoad(options) {
    this.options = options;
  },
  onShow() {
    this.dataSource = [];
    this.pageConfig.pageNo = 1;
    this.getList();
  },
  methods: {
    handleClickRouter,
    hiddenInfo,
    formatters,
    scrollBottom() {
      let current = (this.pageConfig.pageNo += 1);
      let pages = Math.ceil(this.pageConfig.total / this.pageConfig.pageSize);
      if (current <= pages) {
        this.getList();
      } else {
        this.pageBottom = true;
      }
    },
    getList() {
      let data = {
        status: 1,
        position: 7,
        companyMessageId: this.options.companyId,
        pageNo: this.pageConfig.pageNo,
        pageSize: this.pageConfig.pageSize,
      };
      employeesList(data).then((res) => {
        this.dataSource = this.dataSource.concat(res.result.records || []);
        this.pageConfig.total = res.result.total;
      });
    },
  },
};
</script>

<style lang="scss">
.publicSecurity {
  flex: 1;

  .wrapper-content {
    height: calc(100vh - 70px);
    background: #f8f9fb;

    .wrapper-item {
      margin: 0 20rpx;
      padding: 30rpx 40rpx;
      background-color: #ffffff;
      margin-bottom: 20rpx;

      .items {
        display: flex;
        .lt {
          width: 180rpx;
          height: 200rpx;
          margin-right: 30rpx;
          image {
            width: 100%;
            height: 100%;
          }
        }

        .rt {
          width: 425rpx;
          max-width: 425rpx;
        }
      }
    }
  }

  .wrapper-facility {
    padding-top: 30rpx;
    font-size: 26rpx;
    font-weight: 500;
    .facility-item {
      display: flex;
      margin-bottom: 20rpx;

      .lineLabel {
        line-height: 45rpx;
      }

      .label {
        color: #a1a1a1;
        width: 135rpx;
        min-width: 135rpx;
      }

      .job {
        display: inline-block;
        margin-left: 10rpx;
        padding: 2rpx 13rpx;
        font-size: 26rpx;
        font-weight: 500;
        color: #2488f5;
        background: #d8f2ff;
      }
    }
  }
}
</style>
